<%--
  Created by IntelliJ IDEA.
  User: 26335
  Date: 2024/8/18
  Time: 12:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>财务支付管理系统</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/admin.css">
    <link rel="stylesheet" href="assets/css/app.css">
</head>
<body data-type="generalComponents">
<header class="am-topbar am-topbar-inverse admin-header">
    <div class="am-collapse am-topbar-collapse" id="topbar-collapse">
        <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list tpl-header-list">
            <li class="am-dropdown" data-am-dropdown data-am-dropdown-toggle>
                <a class="am-dropdown-toggle tpl-header-list-link" href="javascript:;">
                    <span class="tpl-header-list-user-nick">禁言小张</span><span class="tpl-header-list-user-ico"> <img
                        src="assets/img/user01.png"></span>
                </a>
                <ul class="am-dropdown-content">
                    <li><a href="login.jsp"><span class="am-icon-power-off"></span> 退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
</header>
<div class="tpl-page-container tpl-page-header-fixed">
    <div class="tpl-left-nav tpl-left-nav-hover">
        <div class="tpl-left-nav-list">
            <ul class="tpl-left-nav-menu">
                <li class="tpl-left-nav-item">
                    <a href="javascript:;" class="nav-link tpl-left-nav-link-list ">
                        <i class="am-icon-table"></i>
                        <span>付款管理</span>
                        <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right tpl-left-nav-more-ico-rotate"></i>
                    </a>
                    <ul class="tpl-left-nav-sub-menu">
                        <li>
                            <a href="ticket-open.jsp">
                                <i class="am-icon-angle-right"></i>
                                <span>开具付款凭证</span>
                            </a>
                            <a href="open-list.jsp">
                                <i class="am-icon-angle-right"></i>
                                <span>付款列表</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="tpl-left-nav-item">
                    <a href="javascript:;" class="nav-link tpl-left-nav-link-list active">
                        <i class="am-icon-wpforms"></i>
                        <span>工作台</span>
                        <i class="am-icon-angle-right tpl-left-nav-more-ico am-fr am-margin-right"></i>
                    </a>
                    <ul class="tpl-left-nav-sub-menu" style="display:block">
                        <li>
                            <a href="check-list.jsp" class="active">
                                <i class="am-icon-angle-right"></i>
                                <span>付款复核</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            付款复核列表
        </div>
        <ol class="am-breadcrumb">
            <li class="am-active"><a style="color: #999999;">工作台</a></li>
            <li class="am-active">付款复核列表</li>
        </ol>
        <div class="tpl-portlet-components">
            <div class="tpl-block">
                <div class="am-g">
                    <div class="am-u-sm-6 am-u-md-3">
                        <div class="am-input-group am-input-group-sm">
                                <span class="am-input-group-btn">
                                    <span style="font-size: 14px;margin-right: 8px;margin-left: 8px">凭证编号</span>
                                </span>
                            <input id="am-input-group-btn1" type="text" class="am-form-field"
                                   placeholder="&nbsp;&nbsp;请输入凭证编号"
                                   style="border: 1px solid #c2cad8;width: 84%;border-radius: 3px;">
                        </div>
                    </div>
                    <div class="am-u-sm-6 am-u-md-3">
                        <div class="am-form-group">
                            <span style="font-size: 14px;">收单企业</span>
                            <select id="am-form-group2" data-am-selected="{btnSize: 'sm'}">
                                <option value="">请选择收单企业</option>
                                <option value="腾讯科技">腾讯科技</option>
                                <option value="百度科技">百度科技</option>
                                <option value="讯飞科技">讯飞科技</option>
                                <option value="飞科科技">飞科科技</option>
                            </select>
                        </div>
                    </div>
                    <div class="am-u-sm-6 am-u-md-3">
                        <div class="am-form-group">
                            <span style="font-size: 14px;">开单企业</span>
                            <select id="am-form-group3" class="am-form-field" data-am-selected="{btnSize: 'sm'}">
                                <option value="">请选择开单企业</option>
                                <option value="神州信息">神州信息</option>
                            </select>
                        </div>
                    </div>
                    <div class="am-u-sm-6 am-u-md-3">
                        <div class="am-input-group am-input-group-sm">
                                <span class="am-input-group-btn">
                                    <span style="font-size: 14px;margin-right: 8px;margin-left: 8px">开单日期</span>
                                </span>
                            <input type="text" class="am-form-field" data-am-datepicker
                                   placeholder="&nbsp;&nbsp;请选择日期"
                                   style="border: 1px solid #c2cad8;width: 68%;border-radius: 3px;">
                        </div>
                    </div>
                </div>
                <div class="am-g">
                    <div class="am-u-sm-6 am-u-md-4">
                        <div class="am-input-group am-input-group-sm">
                                <span class="am-input-group-btn">
                                    <span style="font-size: 14px;margin-right: 8px;margin-left: 8px">凭证金额</span>
                                </span>
                            <input type="text" class="am-form-field" placeholder="&nbsp;&nbsp;最低金额(万)"
                                   style="border: 1px solid #c2cad8;width: 23%;border-radius: 3px;">
                            <div class="am-form-field"
                                 style="width: 0%; border-radius: 3px;border: none;margin-left: 10px;">~
                            </div>
                            <input type="text" class="am-form-field" placeholder="&nbsp;&nbsp;最高金额(万)"
                                   style="border: 1px solid #c2cad8;width: 23%;border-radius: 3px;margin-left: 20px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="am-g">
                <div class="am-u-sm-12">
                    <form class="am-form">
                        <table class="am-table am-table-striped am-table-hover table-main">
                            <thead>
                            <tr>
                                <th class="table-title">凭证编号</th>
                                <th class="table-type">收单企业</th>
                                <th class="table-author am-hide-sm-only">凭证金额（元）</th>
                                <th class="table-date am-hide-sm-only">开单企业</th>
                                <th class="table-date am-hide-sm-only">金融机构</th>
                                <th class="table-date am-hide-sm-only">开单日期</th>
                                <th class="table-date am-hide-sm-only">到期日期</th>
                                <th class="table-date am-hide-sm-only">上链地址</th>
                                <th class="table-set">操作</th>
                            </tr>
                            </thead>
                            <tbody id="doc-modal-list" class="tbody1">



                            </tbody>
                        </table>
                        <div class="am-cf">

                            <div class="am-fr">
                                <ul class="am-pagination tpl-pagination" id="btn">
                                    <li class="am-disabled an" id="anNiux"><a href="#">«</a></li>
                                    <li class="am-active an" id="anNiu1"><a href="#">1</a></li>
                                    <li class="an"><a href="#" id="anNiu2">2</a></li>
                                    <li class="an"><a href="#" id="anNiu3">3</a></li>
                                    <li class="an"><a href="#" id="anNiu4">4</a></li>
                                    <li class="an"><a href="#" id="anNiu5">5</a></li>
                                    <li class="an"><a href="#" id="anNiuY">»</a></li>
                                </ul>
                            </div>
                        </div>
                        <hr>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/app.js"></script>
<script>

    function forBooks(list) {
        $(".tbody1").empty();
        for (var i = 0; i < list.length; i++) {
            $("<tr>" +
                "<td>" + list[i].no + "</td>" +
                "<td>" + list[i].shouDanName + "</td>" +
                "<td>" + list[i].amount + "</td>" +
                "<td>" + list[i].KaiDanName + "</td>" +
                "<td>" + list[i].instituName + "</td>" +
                "<td>" + list[i].KaidanTime + "</td>" +
                "<td>" + list[i].ShouDanTime + "</td>" +
                "<td>" + list[i].ShangLian + "</td>" +
                "<td>" + list[i].operate + "</td>" +
                "</tr>").appendTo(".tbody1");
        }
    }


    // 定义全局变量
    var currentPage = 1; // 初始化当前页码

    $(document).ready(function () {
        // 绑定 input 事件到 input 元素

        // var KaiDanName = $(this).val();
        // 初始化时加载第一页
        loadPage(1); // 默认加载第一页
        $('#am-input-group-btn1').on('blur', function () {
            var value1 = $('#am-input-group-btn1').val();
            var shouDanName = $(this).val();
            loadPage(1,value1); // 默认加载第一页
            // $('#am-input-group-btn1').text('你输入的是: ' + value);
        });

        $('#am-form-group2').on('change', function () {
            var value1 = $("#am-input-group-btn1").val();
            var shouDanName = $(this).val();
            loadPage(1,value1,shouDanName);
            // $('#am-input-group-btn1').text('你输入的是: ' + value);
        });

        $('#am-form-group3').on('change', function () {
            var value1 = $("#am-input-group-btn1").val();
            var shouDanName = $("#am-form-group2").val();
            var KaiDanName = $(this).val();
            loadPage(1,value1,shouDanName,KaiDanName);
            // $('#am-input-group-btn1').text('你输入的是: ' + value);
        });


        // 加载特定页的数据
        function loadPage(pageIndex,value1,shouDanName,KaiDanName) {
            $.get("Ticket_openServlet/moHuChaXun12", {"pageIndex": pageIndex,"value1":value1,"shouDanName":shouDanName,"KaiDanName":KaiDanName}, function (pageData) {
                currentPage = pageData.pageIndex; // 更新当前页码
                updatePagination(pageData); // 更新分页控件
                forBooks(pageData.items); // 更新表格数据
            }).fail(function (jqXHR, textStatus, errorThrown) {
                console.error("Failed to load page data: " + textStatus + ", " + errorThrown);
            });
        }

        // 更新分页控件
        function updatePagination(pageData) {
            var totalPages = Math.ceil(pageData.totalItems / pageData.pageSize); // 计算总页数
            var pagination = $('#btn'); // 获取分页容器

            // 清空现有的分页控件
            pagination.empty();

            // 添加分页按钮
            addPageButton(pagination, '«', currentPage - 1); // 添加上一页按钮
            for (var i = 1; i <= totalPages; i++) { // 循环添加每个页码按钮
                addPageButton(pagination, i, i);
            }
            addPageButton(pagination, '»', currentPage + 1); // 添加下一页按钮

            // 绑定点击事件
            bindPageClickEvents();

            // 添加分页按钮的辅助函数
            function addPageButton(container, text, pageNum) {
                // 判断按钮是否可点击
                if (pageNum >= 1 && pageNum <= totalPages) {
                    // 如果按钮可点击，则添加按钮
                    container.append(
                        '<li class="an"><a href="#" id="anNiu' + pageNum + '">' + text + '</a></li>'
                    );
                } else {
                    // 如果按钮不可点击，则添加禁用状态的按钮
                    container.append(
                        '<li class="am-disabled an"><a href="#">' + text + '</a></li>'
                    );
                }
            }

            // 绑定分页按钮的点击事件
            function bindPageClickEvents() {
                $('#btn a').off().click(function (e) {
                    // e.preventDefault(); // 阻止默认行为
                    // 获取当前点击的链接ID
                    var linkId = $(this).attr('id');
                    // 根据不同的链接ID，执行不同的操作
                    if (linkId === 'anNiux') { // 上一页
                        if (currentPage > 1) {
                            loadPage(currentPage - 1); // 加载上一页
                        }
                    } else if (linkId === 'anNiuY') { // 下一页
                        if (currentPage < totalPages) {
                            loadPage(currentPage + 1); // 加载下一页
                        }
                    } else { // 具体的页码
                        var pageNum = parseInt(linkId.substring(5)); // 提取页码数字
                        if (pageNum >= 1 && pageNum <= totalPages) {
                            loadPage(pageNum); // 加载指定页码的页面
                        }
                    }
                });
            }
        }
    });


    // 撤销二次确认
    function demo2() {
        $(function () {
            //状态按钮样式切换
            $('.status-type').find('button').on('click', function () {
                let statusTypeBtnArr = $('.status-type').find('button');
                for (let i = 0; i < statusTypeBtnArr.length; i++) {
                    statusTypeBtnArr.eq(i).removeClass('am-btn-primary');
                }
                $(this).addClass('am-btn-primary');
            });
            $('#doc-modal-list').find('.am-icon').add('#doc-confirm-toggle').on('click', function () {
                $('#my-confirm').modal({
                    relatedTarget: this,
                    onConfirm: function (options) {
                        //点击确认调用函数
                        alert("点击了确认");
                    },
                    onCancel: function () {
                        //点击取消调用函数
                        alert("点击了取消")
                    }
                });
            });
        });
    }

    var BTN;

    $("#status123").find("button").click(function () {
        BTN = $(this).attr("value");
    })

    /*    $(document).ready(function () {
            $.get("Ticket_openServlet/queryAllList",function (list) {
                forBooks(list);
            });
        });*/



        function demo3() {
            var currentRow = $(this).closest('tr');
            // 提取数据
            var rowData = {
                no: currentRow.find("td:eq(0)").text(),
                shouDanName: currentRow.find("td:eq(1)").text(),
                amount: currentRow.find("td:eq(2)").text(),
                KaiDanName: currentRow.find("td:eq(3)").text(),
                instituName: currentRow.find("td:eq(4)").text(),
                KaidanTime: currentRow.find("td:eq(5)").text(),
                ShouDanTime: currentRow.find("td:eq(6)").text(),
                ShangLian: currentRow.find("td:eq(7)").text(),
                operate: currentRow.find("td:eq(10)").text(),
            };
            window.location.href = "http://127.0.0.1:8080/fymSystem_war_exploded/check-detail.jsp?no=" + rowData.no + "&shouDanName=" + rowData.shouDanName + "&amount=" + rowData.amount
                + "&KaiDanName=" + rowData.KaiDanName + "&instituName=" + rowData.instituName + "&KaidanTime=" + rowData.KaidanTime + "&ShouDanTime=" + rowData.ShouDanTime + "&ShangLian=" + rowData.ShangLian
                + "&operate=" + rowData.operate;
        }

        $(document).ready(function () {
            // 绑定点击事件到动态生成的链接
            $('.tbody1').on('click', 'a[href="javascript:void(0);"]', function (event) {
                switch ($(this).text()) {
                    case '详情':
                        demo1.call(this); // 调用 demo1 函数
                        break;
                    case '撤销':
                        var obj = confirm("真的确认撤销吗？");
                        if (obj === true) {
                            demo2.call(this);
                            location.reload();
                        }
                        break;
                    case '复核':
                        demo3.call(this);
                        break;
                    default:
                        // 其他情况
                        break;
                }
            });
        });
</script>
</body>

</html>